<template>
  <div class="payContent" v-if="type">
    <div class="title">扫一扫付款（元）</div>
    <div class="money">￥ {{ info.price }}</div>

    <div class="code">
      <a-space v-if="spaceType">
        <a-spin size="large" />
      </a-space>
    </div>
  </div>

  <a-result
    v-if="!type"
    status="success"
    title="支付成功"
    sub-title="三秒后自动返回首页或点击确定自行返回"
  >
    <template #extra>
      <a-button key="console" type="primary" @click="navGat">确 定</a-button>
    </template>
  </a-result>
</template>

<script>
import { defineComponent, ref, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { baomingPay, baomingCheckPay } from "@/api/https.js";
import QRCode from "qrcodejs2";
export default defineComponent({
  setup() {
    const type = ref(true);
    const router = useRouter();
    const info = JSON.parse(localStorage.getItem("getPayInfo"));
    const user_id = JSON.parse(localStorage.getItem("info")).user_id;
    const getInfo = async () => {
      const data = await baomingPay({
        user_id,
        out_trade_no: info.out_trade_no,
      });
      setCode(data.data.qrCode);
      getPay(user_id, info.out_trade_no);
      console.log("报名支付---", data);
    };
    // 生成二维码
    const spaceType = ref(true);
    const setCode = (url) => {
      const myCode = document.querySelector(".code");
      new QRCode(myCode, {
        width: 200, // 二维码的宽
        height: 200, // 二维码的高
        text: url, // 二维码的内容
        colorDark: "#000", // 二维码的颜色
        colorLight: "#fff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      spaceType.value = false;
    };
    const timeout = ref(null);
    const getPay = async (user_id, out_trade_no) => {
      const data = await baomingCheckPay({
        user_id,
        out_trade_no,
      });
      console.log("检查是否支付---", data);
      if (data.code == 1) {
        clearTimeout(timeout.value);
        localStorage.removeItem("getPayInfo");
        type.value = false;
        timeout.value = setTimeout(() => {
          navGat();
        }, 3000);
      } else {
        timeout.value = setTimeout(() => {
          getPay(user_id, out_trade_no);
        }, 1000);
      }
    };
    const navGat = () => {
      router.go(-1);
    };
    getInfo();

    onBeforeUnmount(() => {
      clearTimeout(timeout.value);
      localStorage.removeItem("getPayInfo");
    });
    return {
      router,
      info,
      type,
      navGat,
      spaceType,
    };
  },
});
</script>

<style lang="less" scoped>
.payContent {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  text-align: center;
  padding-bottom: 40px;

  .title {
    font-size: 1rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #4d4d4d;
  }

  .money {
    margin-top: 20px;
    font-size: 40px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ff6602;
  }

  .code {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
